<template>
	<ul class="right-list-container">
		<li v-for="(item, i) in list" :key="i">
			<span :class="{ active: item.isSelected }" @click="selected(item)">{{
				item.name
			}}</span>
			<span
				v-if="item.aside"
				class="aside"
				:class="{ active: item.isSelected }"
				@click="selected(item)"
				>{{ item.aside }}</span
			>
			<!-- 显示当前组件 -->
			<RightList :list="item.children" @select="selected" />
		</li>
	</ul>
</template>

<script>
export default {
	//组件递归时不知道自身名称便用name代替组件名称
	name: "RightList",
	props: {
		list: {
			type: Array,
			default: () => [], //数组，对象的默认组为[],{}时都要使用函数返回
		},
	},
	methods: {
		selected(item) {
			//当前分类未被选中
			if (!item.isSelected) {
				this.$emit("select", item);
			}
		},
	},
};
</script>

<style scoped lang="less">
@import "~@/styles/var.less";
.right-list-container {
	list-style: none;
	padding: 0;
	.right-list-container {
		margin-left: 1em;
	}
	li {
		min-height: 40px;
		line-height: 40px;
		cursor: pointer;
		.aside {
			font-size: 12px;
			margin-left: 1em;
			color: @gray;
		}
		.active {
			font-weight: bold;
			color: @warn;
		}
	}
}
</style>
